<!-- 专题详情 -->
<template>
  <div class="detail-wrapper">
       <DetailHeader :detail="detailData" :source-info="sourceInfo" :is-buy-person="isBuyPerson" :is-creater="isCreater" @obtain-topic="obtainTopic" @manage-topic="manageTopic"/>
        <div class="detail-container mt20">
            <el-tabs v-model="currentTab" class="custom-tabs" @tab-change="changeTab">
                <el-tab-pane
                    v-for="tab in tabList"
                    :key="tab.key"
                    :label="tab.name"
                    :name="tab.key">
                </el-tab-pane>
            </el-tabs>
            <component
                ref="bottomRef"
                :is="componentMap[currentTab]"
                :detail="detailData"
                :is-buy-person="isBuyPerson"
                :is-creater="isCreater"
                :is-manage="isManage"
                :is-admin="isAdmin"
                @refresh-detail="getDetail"
                @manage-topic="manageTopic"></component>  
        </div>
  </div>
</template>

<script setup>
import DetailHeader from './fragment/detail-header.vue';
import MoocList from './fragment/mooc-list.vue';
import MemberList from './fragment/member-list.vue';
import Confirm from '@/components/confirm/confirm.js';
import { ref, onMounted, computed, watch, watchEffect } from 'vue';
import dayjs from 'dayjs';
import { jumpHref } from '@/router/jumpHref.js';

import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store= useStore();

const route = useRoute();

const bottomRef = ref(null);

// 是否是专题创建人
const isCreater = computed(() => {
    return detailData.value?.creatorFlag;
})

// 是否是专题管理员
const isAdmin = computed(() => {
    return detailData.value?.userRole && detailData.value?.userRole === 'admin';
})

// 是否是购买者
const isBuyPerson = computed(() => {
    return detailData.value?.attendFlag;
})

// 是否是管理员 是否是从管理中心进入的页面
const isManage = ref(false);

const componentMap = {
    'mooc-list': MoocList,
    'member-list': MemberList
};

// 底部tabList 成员只有创建人和管理员可以看
const tabList = ref([
    {
        name: '慕课列表',
        key: 'mooc-list',
    },
    {
        name: '成员',
        key: 'member-list',
    }
]);

// 当前tab
const currentTab = ref('mooc-list');

// 课程详情
const detailData = ref({});

// 来源信息
const sourceInfo = ref({});

// 全部备案信息
const brand = computed(() => {
    return store.state.brand && store.state.brand.publishBrand ? store.state.brand.publishBrand : {};
})

// 具体备案信息
const brandInfo = computed(() => {
    return brand.value.brandConfig ? brand.value.brandConfig : {};
})

// 获取专题详情
async function getDetail () {
    try {
        let res = await G_transmit('topicDetail', {
            queries: {
                id: route.params.topicId
            }
        })
        detailData.value = res.data || {};

        // topicStatus 1 专题进行中 2专题未开始 3专题已结束
        detailData.value.topicStatus = 1;
        let now = dayjs().valueOf();
        if (detailData.value.startTime && now - detailData.value.startTime < 0) {
            detailData.value.topicStatus = 2;
        }
        if (detailData.value.endTime && detailData.value.endTime - now < 0) {
            detailData.value.topicStatus = 3;
        }

        store.dispatch('setBreadCrumb', [{name: detailData.value.name}])
    } catch(_err) {
        console.error(_err);
    }
}

// 获取专题来源
function getSource () {
    G_transmit('topicResource', {
        queries: {
            bizId: route.params.topicId,
            bizType: 'mooc'
        },
        silence: true
    }).then((res) => {
        sourceInfo.value = res.data || {};
    }).catch(_err => {
        console.log(_err);
    })
}

// 报名专题判断专题状态
async function obtainTopic () {
    await store.dispatch('checkIsLogout');
    applyTopic();
}

// 报名专题的方法
function applyTopic () {
    G_transmit('joinTopic', {
        data: {
            bizId: route.params.topicId,
            bizType: 'mooc'
        }
    }).then((res) => {
        G_dispatchEvent('toast', { message: '报名成功', type: 'success'});
        getDetail();
        if (currentTab.value === 'member-list') {
            bottomRef.value && bottomRef.value.refreshData();
        }
    }).catch(_err => {
        console.log(_err);
    })
}


function changeTab () {
    window.history.replaceState('', '', `?tab=${currentTab.value}`);
}

// 管理慕课
function manageTopic (step = 1) {
    G_go({
            name: route.name === 'strainTopicDetail' ? 'strainMoocTopicCreate' : 'moocTopicCreate',
            query: {
                id: route.params.topicId,
                step
            }
        })
}

onMounted(async () => {
    await store.dispatch('checkIsLogout');
    getDetail();
    getSource();
    if (route.query.tab) {
        currentTab.value = route.query.tab;
    }
})

watchEffect(() => {
    let lessonName = detailData.value?.name ? detailData.value?.name : '';
    let siteName = brandInfo.value?.siteName ? '-' + brandInfo.value?.siteName : ''
    document.title = lessonName + siteName
})


</script>

<style lang="scss" scoped>
.detail-wrapper {
    background: #F8F8F8;
}
.mt20 {
    margin-top: 20px;
}
.detail-container {
    min-height: 580px;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    .custom-tabs {
        height: 62px;
        :deep(.el-tabs__item) {
            height: 59px;
            line-height: 59px;
            font-size: 16px;
            font-weight: 400;
            color: var(--srt-main-text-color);
            box-shadow: none;
            &.is-active {
               color: var(--srt-main-active-text-color)
            }
        }
        :deep(.el-tabs__nav-wrap) {
            padding: 0px 21px;
            &::after{
                height: 1px;
                background-color: #CBCBCB;
            }
        }
        :deep(.el-tabs__active-bar) {
            height: 3px;
        }
        :deep(.el-tabs__header) {
            margin: 0;
        }
    }
}

</style>